<template>
	<view class="container">
		<top-back-navbar position="fixed" title="忘记密码" background="#fff" color="#000"></top-back-navbar>
		<view class="right-top-sign"></view>
		<view class="left-top-sign">集贝</view>
		<view class="welcome">找回密码</view>
		<view class="content">
			<view style="padding:30rpx;">
				<view class="forget-input-group">
					<view class="forget-input-text">手机号</view>
					<input class="forget-input" v-model="mobile" type="number" placeholder="您的手机号"
						placeholder-style="color:#bbb" />
				</view>
				<view class="forget-input-group">
					<view class="forget-input-text">短信验证码</view> 
					<view class="forget-input-box">
						<input type="number" class="forget-input" v-model="verifycode" maxlength="5" value="" placeholder="短信验证码"
							placeholder-style="color:#bbb" />
						<button class="forget-button" type="default" :disabled="codebtn" @click="getcode"
							v-cloak>{{codetext}}</button>
					</view>
				</view>
				<view class="forget-input-group">
					<view class="forget-input-text">新登录密码</view> 
					<input class="forget-input" v-model="pwd" password type="text" placeholder="请输入新登录密码"
						placeholder-style="color:#bbb" />
				</view>
				<view class="forget-input-group">
					<view class="forget-input-text">确认新登录密码</view>
					<input class="forget-input" v-model="pwd1" password type="text" placeholder="请确认新登录密码"
						placeholder-style="color:#bbb" />
				</view>
				
			</view>
			<view class="button-group">
				<button type="default" @click="forget" :loading="loading"
					style="background: #05052B;color:#fff">立即找回</button>
				<button style="background: #888;color:#fff" type="primary" @click="backlogin">返回登录</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				area: true,
				top: false,
				loading: false,
				codebtn: false,
				mobile: '',
				pwd: '',
				pwd1: '',
				imgcode: "",
				verifycode: '',
				codetext: '获取验证码',
				openid: '',
				codenum: 60
			};
		},
		onLoad: function() {
			this.$GetOpenid().then(res => {
				this.openid = res;
			})
		},
		methods: {
			backlogin() {
				uni.reLaunch({
					url: "../login"
				})
			},
			forget() {
				if (this.mobile == "") {
					uni.showToast({
						title: '请输入手机号',
						icon: "none"
					});
				} else if (this.pwd == "") {
					uni.showToast({
						title: '请输入登录密码',
						icon: "none"
					});
				} else if (this.pwd1 == "") {
					uni.showToast({
						title: '请确认登录密码',
						icon: "none"
					});
				} else if (this.verifycode == "") {
					uni.showToast({
						title: '请输入短信验证码',
						icon: "none"
					});
				} else {
					this.loading = true
					uni.request({
						url: this.$BASE_URL +
							'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=account.forget&type=0&app=1',
						method: 'POST',
						data: {
							mobile: this.mobile,
							pwd: this.pwd,
							pwd1: this.pwd1,
							verifycode: this.verifycode
						},
						header: {
							'Content-Type': 'application/x-www-form-urlencoded'
						},
						success: res => {
							this.loading = false
							console.log(JSON.stringify(res))
							uni.showToast({
								title: res.data.result.message,
								icon: "none"
							});
							if (res.data.status == 1) {
								setTimeout(() => {
									uni.reLaunch({
										url: "../login"
									})
								}, 1500)
							}
						},
						fail: () => {},
						complete: () => {}
					});
				}
			},
			getcode() {
				if (this.mobile == "") {
					uni.showToast({
						title: '请输入手机号',
						icon: "none"
					});
				}else {
					uni.request({
						url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=account.verifycode&app=1',
						method: 'POST',
						data: {
							mobile: this.mobile,
							temp: 'sms_forget'
						},
						header: {
							'Content-Type': 'application/x-www-form-urlencoded'
						},
						success: res => {
							uni.showToast({
								title: res.data.result.message,
								icon: "none"
							});
							if (res.data.status == 1) {
								this.codebtn = true
								var codetexts = setInterval(() => {
									this.codenum = this.codenum - 1
									this.codetext = this.codenum + 's'
								}, 1000)
								setTimeout(() => {
									this.codebtn = false
									clearInterval(codetexts);
									this.codetext = '重新发送'
								}, 60000)
							}
						},
						fail: () => {},
						complete: () => {}
					});
				}
			}
		}
	}
</script>

<style lang='scss'>
	.container {
		position: relative;
		min-height: 100vh;
		background-color: #fafafa;
	}
	.button-group{
		padding:30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		button{
			width:47%;
			font-size: 28rpx;
		}
	}
	.forget-input-group {
		background-color: #f8f6fc;
		border-radius: 6px;
		overflow: hidden;
		margin-top:30rpx;
		.forget-input-text {
			font-size: 24rpx;
			color: #888;
			padding:16rpx 30rpx;
		}

		.forget-input {
			border:1px solid #fafafa;
			outline: none;
			box-sizing: border-box;
			display: block;
			height: 90rpx;
			padding: 6rpx 28rpx 6rpx 20rpx;
			background-color: transparent;
			color: #333;
			width: 100%;
			flex:1;
		}
		.forget-input-box{
			display: flex;
			align-items: center;
		}
		.forget-img{
			width: 180rpx;
			height: 90rpx;
			object-fit: contain;
		}
		.forget-button{
			width: 180rpx;
			height: 80rpx;
			background-color: #05052B;
			color:#fff;
			text-align: center;
			line-height: 80rpx;
			font-size: 24rpx;
		}
	}

	.left-top-sign {
		font-size: 120rpx;
		color: #05052B;
		padding: 30rpx;
		line-height: 1.1;
	}

	.welcome {
		font-size: 46rpx;
		color: #555;
		text-shadow: 1px 0px 1px rgba(0, 0, 0, .3);
		padding: 20rpx 30rpx;
		line-height: 1.1;
	}

	.right-top-sign {
		position: absolute;
		top: 180rpx;
		right: 0;
		z-index: 95;

		&:before,
		&:after {
			display: block;
			content: "";
			width: 400upx;
			height: 80upx;
			background: url(../../../static/126.jpg) no-repeat center;
		}

		&:before {
			transform: rotate(50deg);
			border-radius: 0 50px 0 0;
		}

		&:after {
			position: absolute;
			right: -198upx;
			top: 0;
			transform: rotate(-50deg);
			border-radius: 50px 0 0 0;
			/* background: pink; */
		}
	}

	.area.webkit {
		position: absolute;
		z-index: 999;
		top: 50%;
		margin-top: -280upx;
		border: 0;
	}

	.top {
		width: 180upx;
		height: 180upx;
		border-radius: 50%;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		display: block;
		position: absolute;
		left: 50%;
		margin-left: -90upx;
		top: -200upx;
		transition: .3s all;
	}

	.register .top {
		top: 200upx;
	}

	.uni-list-cell {
		width: 50%;
		padding: 24upx 80upx;
	}

	.uni-list-cell:after {
		display: none;
	}

	.with-fun .uni-icon {
		width: 40px;
		height: 40px;
		line-height: 40px;
		-webkit-flex-shrink: 0;
		-ms-flex-negative: 0;
		flex-shrink: 0;
	}

	.btn-group button {
		background: transparent;
		color: #fff;
		font-size: 28upx;
		margin: 0;
		padding: 0;
		opacity: .8;
	}

	.btn-group button:after {
		display: none;
	}

	input {
		padding: 24upx;
		background: transparent;
		color: #fff;
		border-bottom: 1px solid #fff;
	}

	.login-btn {
		color: #fff;
		border: 2upx solid #fff;
		background: transparent;
		height: 84upx;
		line-height: 84upx;
		font-size: 28upx;
		margin-top: 50upx;
		margin-bottom: 10upx;
	}

	.login-btn:after {
		display: none;
	}

	uni-button[loading][type=default] {
		color: rgba(255, 255, 255, 0.6);
		background-color: transparent;
	}

	.content {}

	.register .content {
		top: 400upx;
		padding: 40upx;
		box-sizing: border-box;
	}

	.inputright {
		width: 200upx;
		height: 52upx;
		margin-top: 24upx;
	}

	button.inputright {
		line-height: 48upx;
		font-size: 24upx;
		background: transparent;
		color: #fff;
		border: 2upx solid #fff;
	}

	input.flex {
		border: 0;
	}

	.webkit {
		border-bottom: 1px solid #fff;
	}
</style>
